<!DOCTYPE html>
<html>
<head>
    <title>Astroid Curve Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500" style="background-color: #f0f0f0;"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const width = canvas.width;
        const height = canvas.height;
        const centerX = width / 2;
        const centerY = height / 2;
        const A = 180; // Amplitude for the astroid, determining its size

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, width, height);

        // Set drawing styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw Coordinate Axes
        ctx.beginPath();
        // x-axis
        ctx.moveTo(0, centerY);
        ctx.lineTo(width, centerY);
        // y-axis
        ctx.moveTo(centerX, 0);
        ctx.lineTo(centerX, height);
        ctx.stroke();

        // 2. Draw the Astroid curve
        ctx.beginPath();
        const step = 0.01;
        for (let phi = 0; phi <= 2 * Math.PI + step; phi += step) {
            const x = A * Math.pow(Math.cos(phi), 3);
            const y = A * Math.pow(Math.sin(phi), 3);
            
            // Convert to canvas coordinates (y-axis is inverted)
            const canvasX = centerX + x;
            const canvasY = centerY - y;

            if (phi === 0) {
                ctx.moveTo(canvasX, canvasY);
            } else {
                ctx.lineTo(canvasX, canvasY);
            }
        }
        ctx.closePath();
        ctx.stroke();

        // 3. Draw the shaded area at point A
        ctx.beginPath();
        const pointA_x = centerX - A;
        const pointA_y = centerY;

        const phi_offset = 0.18; // Angle offset to define the width of the shaded cusp
        const x_offset1 = A * Math.pow(Math.cos(Math.PI - phi_offset), 3);
        const y_offset1 = A * Math.pow(Math.sin(Math.PI - phi_offset), 3);
        const x_offset2 = A * Math.pow(Math.cos(Math.PI + phi_offset), 3);
        const y_offset2 = A * Math.pow(Math.sin(Math.PI + phi_offset), 3);

        ctx.moveTo(pointA_x, pointA_y);
        ctx.lineTo(centerX + x_offset1, centerY - y_offset1);
        ctx.lineTo(centerX + x_offset2, centerY - y_offset2);
        ctx.closePath();
        ctx.fillStyle = 'dimgray';
        ctx.fill();

        // 4. Draw Labels
        ctx.fillStyle = 'black';
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Label 'y'
        ctx.fillText('y', centerX + 20, 15);

        // Label 'x'
        ctx.fillText('x', width - 20, centerY + 20);

        // Label 'O' (Origin)
        ctx.fillText('O', centerX + 18, centerY + 18);
        
        // Label 'A'
        ctx.textAlign = 'right';
        ctx.fillText('A', pointA_x - 10, centerY);

        // Label 'B'
        const pointB_x = centerX;
        const pointB_y = centerY + A;
        ctx.textAlign = 'left';
        ctx.fillText('B', pointB_x + 10, pointB_y + 15);

        // Label 'P'
        const phi_p = 3 * Math.PI / 4; // Position P in the second quadrant
        const x_p = A * Math.pow(Math.cos(phi_p), 3);
        const y_p = A * Math.pow(Math.sin(phi_p), 3);
        const canvasP_x = centerX + x_p;
        const canvasP_y = centerY - y_p;
        ctx.textAlign = 'center';
        ctx.fillText('P', canvasP_x - 20, canvasP_y - 15);

    </script>
</body>
</html>